<script lang="tsx">
import { defineComponent, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import ModulePreviewPanel from '#/views/competition/modules/competition-list/home-drawer/ModulePreviewPanel.vue';
import { showMatchFirstPageApi } from '#/api/competition/competition-list';

export default defineComponent({
  name: 'CompetitionHomeIndex',
  setup() {
    const route = useRoute();
    const loading = ref(false);
    const modules = ref<any[]>([]);
    const bannerModule = ref<any>(null);
    const activeModule = ref<any>(null);

    // 获取大赛首页配置数据
    const loadCompetitionData = async () => {
      loading.value = true;
      try {
        // 从路由参数或其他方式获取大赛ID
        const matchId = route.query.matchId;
        if (!matchId) {
          console.warn('未找到大赛ID');
          return;
        }

        const response = await showMatchFirstPageApi({ matchId });
        if (response && response.configTemplate) {
          const config = JSON.parse(response.configTemplate);

          // 设置Banner数据
          if (config.banner) {
            bannerModule.value = {
              id: 'banner_module',
              type: 'banner',
              data: config.banner
            };
          }

          // 设置其他模块数据 - 支持新的列表结构
          let loadedModules: any[] = [];

          if (config.modules && Array.isArray(config.modules)) {
            // 新的列表结构：直接使用模块列表
            loadedModules = config.modules.map((module: any) => ({
              id: module.id || `module_${module.type}_${module.order}`,
              type: module.type,
              order: module.order || 0,
              data: module.data,
              createdAt: module.createdAt || Date.now()
            }));
          } else {
            // 向后兼容：处理旧的对象结构
            const moduleTypes = ['title', 'content', 'tabs', 'table', 'timeline'];
            moduleTypes.forEach((type, index) => {
              if (config[type]) {
                loadedModules.push({
                  id: `module_${type}_${index}`,
                  type,
                  order: index,
                  data: config[type],
                  createdAt: Date.now()
                });
              }
            });
          }

          modules.value = loadedModules.sort((a, b) => a.order - b.order);
        }
      } catch (error) {
        console.error('加载大赛首页数据失败:', error);
      } finally {
        loading.value = false;
      }
    };

    // 处理模块激活（首页展示模式下不需要激活功能）
    const handleModuleActivate = () => {
      // 首页展示模式下不需要处理激活事件
    };

    // 处理预览区域点击（首页展示模式下不需要处理）
    const handlePreviewAreaClick = () => {
      // 首页展示模式下不需要处理点击事件
    };

    onMounted(() => {
      loadCompetitionData();
    });

    return () => (
      <div class="competition-home-container" v-loading={loading.value}>
        {modules.value.length > 0 || bannerModule.value ? (
          <ModulePreviewPanel
            modules={modules.value}
            bannerModule={bannerModule.value}
            activeModule={activeModule.value}
            previewMode={true}
            enableScroll={false}
            onModule-activate={handleModuleActivate}
            onPreview-area-click={handlePreviewAreaClick}
          />
        ) : (
          !loading.value && (
            <div class="flex-center h-[400px] text-gray-500">
              <div class="text-center">
                <div class="text-lg mb-2">暂无内容</div>
                <div class="text-sm">大赛首页内容正在建设中...</div>
              </div>
            </div>
          )
        )}
      </div>
    );
  }
})
</script>
